import * as React from "react";

const ICON = `M256.688,141.444c-18.36-21.42-37.944-40.392-53.244-63.648c-12.853-19.584-25.704-39.168-42.228-56.304
		c-10.404-11.016-48.348-36.72-56.916-9.18c-6.732,22.644,12.24,52.02,22.032,70.992c12.24,23.256,27.54,44.676,42.228,66.096
		c-25.092,3.672-49.572,6.732-74.664,7.956c0-1.836-0.612-3.06-2.448-4.284C78.596,140.22,64.52,127.98,52.28,114.516
		c-2.448-3.06-6.732-2.448-9.792-1.224c-7.956,3.672-14.076,9.792-20.196,15.912c-2.448,2.448-3.672,6.732-1.224,9.792
		c6.732,9.18,14.076,18.36,21.42,26.928c2.448,3.06,4.896,5.508,7.956,7.956c-12.852,9.792-25.092,23.256-35.496,34.884
		c-2.448,3.061-3.672,8.568,0,11.629c9.792,7.955,20.196,14.075,31.212,20.195c3.06,1.836,7.344,1.836,9.792-1.224
		c7.956-9.18,16.524-17.136,25.092-25.704c3.06-3.06,6.12-6.12,8.568-9.18c26.316,2.447,53.244,4.283,79.56,6.731
		c-7.344,11.017-13.464,22.032-20.196,33.66c-11.628,21.42-26.316,41.004-37.332,62.424c-12.24,23.256-3.06,45.288,25.092,44.064
		c30.6-1.225,55.691-34.272,72.216-55.692c12.24-15.912,23.256-33.048,33.66-50.184c5.508-9.181,12.852-18.973,17.748-29.376
		c26.928-0.612,76.5,5.508,78.336-29.988C341.145,145.728,287.9,142.056,256.688,141.444z M132.452,310.968
		c-0.612,1.225-1.224,3.061-1.836,4.896c-1.224,0.612-1.836,1.836-2.448,2.448c1.224-3.672,2.448-7.345,4.284-11.017
		C132.452,307.908,132.452,309.132,132.452,310.968z`;

function Pin({ size = 10, grounded, verticalRate }) {
  // Determine the fill color based on grounded status and verticalRate
  let fillColor;
  if (grounded) {
    fillColor = "#808080"; // Gray for grounded
  } else if (verticalRate > 0) {
    fillColor = "#00FF00"; // Green for ascending
  } else if (verticalRate < 0) {
    fillColor = "#FF0000"; // Red for descending
  } else {
    fillColor = "#0000FF"; // Blue for no vertical movement or no data
  }

  const pinStyle = {
    cursor: "pointer",
    fill: fillColor,
    stroke: "none",
  };

  return (
    <svg height={size} viewBox="0 0 351.409 351.409" style={pinStyle}>
      <path d={ICON} />
    </svg>
  );
}

export default React.memo(Pin);
